<template>
  <div id="app">
    <div class="container mx-auto p-6">
      <h1 class="text-3xl font-bold text-center mb-10 text-gray-800">Vue2 时间线组件示例</h1>
      
      <!-- 基础时间线 -->
      <div class="mb-16">
        <h2 class="text-2xl font-semibold mb-6 text-gray-700">基础时间线</h2>
        <Timeline 
          :items="basicItems" 
          title="项目开发时间线"
        />
      </div>
      
      <!-- 彩色标记时间线 -->
      <div class="mb-16">
        <h2 class="text-2xl font-semibold mb-6 text-gray-700">彩色标记时间线</h2>
        <Timeline 
          :items="coloredItems" 
          title="产品发布历程"
        />
      </div>
      
      <!-- 带操作按钮的时间线 -->
      <div>
        <h2 class="text-2xl font-semibold mb-6 text-gray-700">带操作按钮的时间线</h2>
        <Timeline 
          :items="actionItems" 
          title="任务进度跟踪"
        />
      </div>
    </div>
  </div>
</template>

<script>
import Timeline from './components/Timeline.vue';

export default {
  name: 'App',
  components: {
    Timeline
  },
  data() {
    return {
      basicItems: [
        {
          id: 1,
          date: '2025年1月15日',
          title: '项目启动',
          description: '完成项目规划和需求分析，组建开发团队。'
        },
        {
          id: 2,
          date: '2025年2月28日',
          title: '前端开发完成',
          description: '完成用户界面设计和交互功能开发。'
        },
        {
          id: 3,
          date: '2025年3月15日',
          title: '后端开发完成',
          description: '完成API接口和数据库设计，实现核心业务逻辑。'
        },
        {
          id: 4,
          date: '2025年4月10日',
          title: '测试阶段',
          description: '进行功能测试、性能测试和安全测试，修复发现的问题。'
        },
        {
          id: 5,
          date: '2025年5月5日',
          title: '正式上线',
          description: '产品成功上线，开始面向用户提供服务。'
        }
      ],
      coloredItems: [
        {
          id: 1,
          date: '2023年6月',
          title: '产品原型设计',
          description: '完成初始产品概念和原型设计',
          dotClass: 'bg-blue-500'
        },
        {
          id: 2,
          date: '2023年12月',
          title: 'Alpha版本发布',
          description: '内部测试版本发布，收集团队反馈',
          dotClass: 'bg-green-500'
        },
        {
          id: 3,
          date: '2024年5月',
          title: 'Beta版本发布',
          description: '公开测试版本发布，开始收集用户反馈',
          dotClass: 'bg-yellow-500'
        },
        {
          id: 4,
          date: '2024年11月',
          title: '产品重构',
          description: '根据用户反馈进行大规模产品重构',
          dotClass: 'bg-red-500'
        },
        {
          id: 5,
          date: '2025年3月',
          title: '1.0正式版发布',
          description: '经过多次迭代，发布首个稳定版本',
          dotClass: 'bg-purple-500'
        }
      ],
      actionItems: [
        {
          id: 1,
          date: '昨天',
          title: '需求评审',
          description: '与产品团队讨论新功能需求',
          actions: [
            {
              label: '查看详情',
              onClick: (item) => this.showDetails(item)
            },
            {
              label: '已完成',
              class: 'bg-green-500 hover:bg-green-600',
              onClick: (item) => this.markAsComplete(item)
            }
          ]
        },
        {
          id: 2,
          date: '今天上午',
          title: 'UI设计',
          description: '设计新功能的用户界面',
          actions: [
            {
              label: '查看设计稿',
              onClick: (item) => this.showDetails(item)
            },
            {
              label: '进行中',
              class: 'bg-yellow-500 hover:bg-yellow-600',
              onClick: (item) => this.markAsInProgress(item)
            }
          ]
        },
        {
          id: 3,
          date: '今天下午',
          title: '开发任务',
          description: '实现新功能的后端逻辑',
          actions: [
            {
              label: '查看任务',
              onClick: (item) => this.showDetails(item)
            },
            {
              label: '开始',
              class: 'bg-primary hover:bg-primary/90',
              onClick: (item) => this.startTask(item)
            }
          ]
        }
      ]
    };
  },
  methods: {
    showDetails(item) {
      alert(`查看 ${item.title} 的详情`);
    },
    markAsComplete(item) {
      alert(`${item.title} 已标记为完成`);
    },
    markAsInProgress(item) {
      alert(`${item.title} 已标记为进行中`);
    },
    startTask(item) {
      alert(`开始 ${item.title} 任务`);
    }
  }
}
</script>

<style>
#app {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
}

.primary {
  color: #3b82f6;
}

.bg-primary {
  background-color: #3b82f6;
}
</style>  